<template>
  <view class="coupon-page">
    <!-- 优惠券状态切换 -->
    <view class="coupon-tabs">
      <view 
        class="tab-item" 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="{active: activeTab === tab.value}"
        @click="activeTab = tab.value"
      >
        <text>{{tab.label}}</text>
      </view>
    </view>
    
    <!-- 优惠券列表 -->
    <scroll-view scroll-y class="coupon-list">
      <template v-if="coupons.length">
        <coupon-card 
          v-for="(coupon, index) in coupons" 
          :key="index" 
          :coupon="coupon"
          @click="handleUseCoupon(coupon)"
        ></coupon-card>
      </template>
      
      <view v-else class="empty">
        <image src="/static/empty-coupon.png" class="empty-img"></image>
        <text class="empty-text">暂无可用优惠券</text>
        <view class="empty-btn" @click="handleGetCoupon">领取优惠券</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'usable',
      tabs: [
        { label: '可用', value: 'usable' },
        { label: '已用', value: 'used' },
        { label: '过期', value: 'expired' }
      ],
      coupons: [
        // 优惠券数据
      ]
    }
  },
  methods: {
    handleUseCoupon(coupon) {
      // 使用优惠券逻辑
    },
    handleGetCoupon() {
      uni.navigateTo({
        url: '/pages/coupon/receive'
      })
    }
  }
}
</script>

<style lang="scss">
$primary-color: #FF7F00;

.coupon-page {
  background: #f8f8f8;
  min-height: 100vh;
}

.coupon-tabs {
  display: flex;
  background: #fff;
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    font-size: 15px;
    position: relative;
    
    &.active {
      color: $primary-color;
      font-weight: bold;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 3px;
        background: $primary-color;
        border-radius: 2px;
      }
    }
  }
}

.coupon-list {
  padding: 15px;
  height: calc(100vh - 100px);
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
  
  .empty-img {
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
  }
  
  .empty-text {
    font-size: 15px;
    color: #999;
    margin-bottom: 30px;
  }
  
  .empty-btn {
    width: 200px;
    height: 44px;
    background: $primary-color;
    border-radius: 22px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>